<!--
 * @Author: your name
 * @Date: 2021-07-20 14:21:01
 * @LastEditTime: 2021-09-24 14:24:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\orderCenter\masterOrder\details.vue
-->
<template>
  <div
    class="white-content"
    v-loading="pageLoading"
    element-loading-text="loading"
  >
    <div class="newPageTitle">
      <span class="backIcon" @click="goBack"><i class="el-icon-back"></i></span>
      <h1 style="display: inline-block; margin-left: 10px; font-weight: bold">
        订单详情
      </h1>
    </div>
    <div class="content">
      <div class="detail-content-section">
        <h2>
          <span>主订单编号：{{ datas.responseOrderVo.orderNo }}</span>
          <span style="float: right"
            >主订单状态：{{ getDictionaryNameByCode('ORDERSTATUS', datas.responseOrderVo.status) }}</span
          >
        </h2>
          <el-form label-width="130px" label-position="left">
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label="用户ID：">
                  {{ datas.responseOrderVo.customerId }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户姓名：">
                  {{ datas.responseOrderVo.customerName }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="用户手机号：">
                  {{ datas.responseOrderVo.customerMobile }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label="用户邮箱：">
                  {{ datas.responseOrderVo.customerEmail }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="VIN：">
                  {{ datas.responseOrderVo.vin }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车牌号：">
                  {{ datas.responseOrderVo.plateNumber }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="主订单创建时间：">
                  {{ datas.responseOrderVo.createTime | timestampToChange('time')  }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="主订单更新时间：">
                  {{ datas.responseOrderVo.updateTime | timestampToChange('time') }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
      </div>
      <div class="detail-content-section">
        <h2>关联子订单列表</h2>
        <el-table :data="datas.responseSubOrderVoList">
          <el-table-column
            label="子订单号"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span
                class="edit-item colorLink"
                @click="toDetails(scope.row)"
              >
                {{ scope.row.suborderNo }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="子订单状态"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('SUBORDERSTATUS', scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column
            label="子订单类型"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getDictionaryNameByCode('SUBORDERTYPE', scope.row.subOrderType) }}
            </template>
          </el-table-column>
          <el-table-column
            label="子订单金额"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.amount | numFormat }}
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            min-width="140"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.createTime | timestampToChange('time') }}
            </template>
          </el-table-column>
          <el-table-column
            label="更新时间"
            align="center"
            min-width="140"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.updateTime | timestampToChange('time') }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="detail-content-section">
        <h2>支付详情</h2>
        <el-form label-width="100px" label-position="left">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="支付订单号：">
                {{ datas.responseOrderPaymentVo.paymentNo }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付平台：">
                {{ datas.responseOrderPaymentVo.paymentPlatform }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付渠道：">
                {{ getDictionaryNameByCode('PAYMENTMETHOD', datas.responseOrderPaymentVo.paymentMethod) }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="支付状态：">
                {{
                  getDictionaryNameByCode(
                    'ORDERPAYMENTSTATUS',
                    datas.responseOrderPaymentVo.paymentStatus
                  )
                }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付金额：">
                {{ datas.responseOrderPaymentVo.buyerPayAmount }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创建时间：">
                {{
                  datas.responseOrderPaymentVo.createTime
                    | timestampToChange('time')
                }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="完成时间：">
                {{
                  datas.responseOrderPaymentVo.paymentFinishTime
                    | timestampToChange('time')
                }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div v-if="datas.responseOrderCancelReasonVo !== null" class="detail-content-section">
        <h2>取消详情</h2>
        <el-form label-width="130px" label-position="left">
          <el-row :gutter="40">
            <el-col :span="8">
              <el-form-item label="取消原因：">
                {{ datas.responseOrderCancelReasonVo.cancelReasonValue }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单取消时间：">
                {{ datas.responseOrderCancelReasonVo.createTime | timestampToChange('time') }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { setRouterParams, getRouterParams } from '@/utils/auth'
import { getMasterDetail } from '@/api/order'
import { common } from '@/mixins/common'
import { mapGetters } from 'vuex'
export default {
  name: 'masterOrderDetails',
  data () {
    return {
      datas: {
        responseOrderCancelReasonVo: {},
        responseOrderVo: {},
        responseSubOrderVoList: [],
        responseOrderPaymentVo: {}
      },
      pageLoading: false,
      id: ''
    }
  },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  created () {},
  mounted () {
    let params = {}
    if (this.$route.params.id) {
      setRouterParams(this.$route)
      params = this.$route.params
    } else {
      params = getRouterParams(this.$route)
    }
    const id = params.id
    this.getMasterDetailInfo(id)
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    getMasterDetailInfo (id) {
      this.pageLoading = true
      getMasterDetail(id).then((res) => {
        if (res) {
          if (Number(res.code) === 1) {
            this.datas = res.obj
          } else {
            this.$alert('获取主订单详情失败')
          }
          this.pageLoading = false
        }
      }).catch(() => {
        this.$alert('获取主订单详情失败')
        this.pageLoading = false
      })
    },
    toDetails (row) {
      if (!this.$auth('orderManagement:subOrder:detail')) {
        this.$alert('您没有权限')
        return false
      }
      this.$router.push({ name: 'suborderDetails', params: { id: row.id } })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.footer {
  width: 100%;
  margin: 0;
}
.detail-section {
  h2 {
    margin: 15px 0;
    font-weight: bold;
  }
}
/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
